<template>
  <div class="make_an_appointment">
    <nav-header>
      <template slot="menuBefore">
        <li>
          <router-link to="/resources/live/livePlay-list" tag="a"
            >直播列表</router-link
          >
        </li>
        <li class="gap">&gt;</li>
      </template>
      <li>直播详情</li>
    </nav-header>
    <!--  -->
    <div class="publishFrom">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="直播时间" prop="liveTime">
          <el-input v-model="ruleForm.liveTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="直播名称" prop="name">
          <el-input v-model="ruleForm.name" disabled></el-input>
        </el-form-item>
        <ul>
          <li class="publishFrom_seleck">
            <el-form-item label="直播设备" prop="recorder_name">
              <el-select v-model="ruleForm.recorder_name" filterable disabled>
              </el-select>
            </el-form-item>
          </li>
          <!--  -->

          <template v-if="!$store.state.platformInformation">
            <li
              v-if="!$store.state.platformInformation"
              class="publishFrom_seleck"
            >
              <el-form-item label="学段">
                <el-select
                  v-model="ruleForm.study_section_id"
                  filterable
                  placeholder="请选择"
                  disabled
                >
                  <el-option
                    v-for="(item, index) in orgLevel2"
                    :label="item.name"
                    :value="item.id"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年级">
                <el-select
                  v-model="ruleForm.grade_id"
                  filterable
                  placeholder="请选择"
                  disabled
                >
                  <el-option
                    v-for="(item, index) in orgLevel3"
                    :label="item.name"
                    :value="item.id"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </li>
            <li
              v-if="!$store.state.platformInformation"
              class="publishFrom_seleck"
            >
              <el-form-item label="科目">
                <el-select
                  v-model="ruleForm.subject_id"
                  filterable
                  placeholder="请选择"
                  disabled
                >
                  <el-option
                    v-for="(item, index) in orgSubject"
                    :label="item.name"
                    :value="item.id"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </li>
            <li class="publishFrom_seleck">
              <el-form-item label="通知班级">{{
                ruleForm.class_name
              }}</el-form-item>
            </li>
          </template>
        </ul>
        <el-form-item label="直播简介" prop="profile">
          <el-input
            type="textarea"
            :rows="5"
            resize="none"
            v-model="ruleForm.profile"
            placeholder=""
            disabled
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="观看权限" class="jurisdiction">
					<span class="view-role" v-for="(item, inx) in allList" :key="inx">{{item.name}}</span>
				</el-form-item> -->

        <el-form-item label="封面图片" prop="picture">
          <div class="publishFrom_ box">
            <img :src="BASE_URL + ruleForm.picture" />
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// import menuLink from './menuLink.vue'
export default {
  name: "",
  data() {
    return {
      orgLevel2: [], //学段
      orgLevel3: [], //年级
      orgSubject: [], //科目
      ruleForm: {
        liveTime: "", //直播时间
        name: "", //视频名称
        profile: "", //视频简介
        picture: "",
        recorder_name: "", //直播设备
        study_section_id: "", //学段
        grade_id: "", //年级
        subject_id: "", //科目
        class_name: "", //通知班级
      },
      allList: [], // 角色权限
      limitId: [], // 观看 id
      limitList: [], // 观看权限列表
    };
  },
  created() {
    this.LiveMSG();
    this.getOrgLevel2();
  },
  methods: {
    //获取学段
    getOrgLevel2() {
      let success = (res) => {
        let data = res.data;
        this.orgLevel2 = data;
        this.orgLevel2.unshift({ id: 0, name: "暂无绑定学段" });
      };

      let params = {
        level: 2,
        pid: 1,
        direction: "balance",
      };

      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/newlevel/platform_org", {
          params: params,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/org", {
          params: params,
          func: { success: success },
        });
      }
    },
    //获取年级
    getOrgLevel3() {
      let success = (res) => {
        let data = res.data;
        this.orgLevel3 = data;
        this.orgLevel3.unshift({ id: 0, name: "暂无绑定年级" });
      };

      let params = {
        level: 3,
        pid: this.ruleForm.study_section_id,
        direction: "balance",
      };

      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/newlevel/platform_org", {
          params: params,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/org", {
          params: params,
          func: { success: success },
        });
      }
    },
    //科目
    getSubject() {
      let success = (res) => {
        let data = res.data;
        this.orgSubject = data;
        this.orgSubject.unshift({ id: 0, name: "暂无绑定科目" });
      };
      let params = {
        type: 2,
        org_id: this.ruleForm.grade_id,
        status: 1,
      };

      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/newlevel/platform_subject", {
          params: params,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/cate/subject", {
          params: params,
          func: { success: success },
        });
      }
    },
    LiveMSG() {
      let success = (res) => {
        let data = res.data;
        let time = data.start_time.substring(0, 16) + " - " + data.end_time.substring(11, 16);
        this.ruleForm.study_section_id = data.study_section_id;
        this.ruleForm.grade_id = data.grade_id;
        this.ruleForm.subject_id = data.subject_id;
        this.ruleForm = data;
        this.ruleForm.liveTime = time;
        this.limitId = data.limit_id;
        this.getOrgLevel3();
        this.getSubject();
        if (data.class_name != "") {
          this.ruleForm.class_name = data.class_string.split(",").join(" ");
        }

        switch (+res.data.limit_type) {
          case 1:
            this.getAllRole();
            break;
          case 2:
            this.getAllGrade();
            break;
          case 3:
            this.getAllClass();
            break;
        }
      };
      this.$ajax({
        url: "api/live/live",
        method: "get",
        params: { liveid: this.$route.query.id },
        func: { success: success },
      });
    },
    /**
     * 获取全部班级
     */
    getAllClass() {
      let success = (res) => {
        res.data[0].children.forEach((item1) => [
          item1.children.forEach((item2) => {
            item2.children.forEach((item3) => {
              if (this.limitId.includes(item3.id)) {
                this.allList.push({
                  name: item3.rename,
                });
              }
            });
          }),
        ]);
      };
      let params = {
        data_type: "manage_tree",
        status: "1, 2",
      };

      this.$ajax.get("api/org/org", {
        params: params,
        func: { success: success },
      });
    },
    /**
     * 获取全部年级
     */
    getAllGrade() {
      let success = (res) => {
        !is_empty(res.data) &&
          res.data.forEach((item) => {
            if (this.limitId.includes(item.id)) {
              this.allList.push(item);
            }
          });
      };

      this.$ajax.get("api/org/all_grade", { func: { success: success } });
    },
    /**
     * 获取全部角色权限
     */
    getAllRole() {
      let success = (res) => {
        !is_empty(res.data) &&
          res.data.forEach((item) => {
            if (this.limitId.includes(item.id)) {
              this.allList.push(item);
            }
          });
      };

      this.$ajax.get("api/role/get_small_role", {
        params: { type: 1 },
        func: { success: success },
      });
    },
  },
};
</script>

<style lang="scss">
.make_an_appointment {
  max-width: 1000px;
  .el-form {
    padding-top: 30px;
  }
  .el-input.is-disabled .el-input__inner,
  .el-textarea.is-disabled .el-textarea__inner,
  .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #666;
    background-color: #fff;
  }

  .view-role {
    display: inline-block;
    margin-right: 40px;
    margin-bottom: 10px;
  }

  .jurisdiction {
    > label {
      &:after {
        display: block;
        content: "(谁不能查看)";
        font-size: 12px;
        color: #999;
        line-height: 16px;
      }
    }
  }
}
</style>